'use client' import { useState, useEffect } from 'react' import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" const meals = [ { name: "Turkey Bowl", description: "1 cup 93% lean ground turkey (protein), 1 cup sauteed spinach (vegetable/carb), 1 tsp grass fed butter (fat), ⅓ cup roasted sweet potato (carb)" }, { name: "Protein Smoothie", description: "1 scoop protein powder (PROTEIN), 1 cup spinach/kale (CARB), 1 cup organic frozen berries (CARB), 4 oz milk, water as needed, ½ cup frozen riced cauliflower for smoothness (CARB)" }, { name: "Lox Plate", description: "2oz Smoked salmon (protein), 1 rice cake (carb), ½ cup cottage cheese (protein/fat), handful berries (fruit/carb)" }, { name: "Yogurt Parfait", description: "1 cup 2% yogurt (PROTEIN), ½ - 1 scoop protein powder, mixed in (PROTEIN), ½ cup organic berries (CARB), ¼ - 1/3 cup granola (CARB), drizzle nut butter (FAT)" }, { name: "Loaded Avo Toast", description: "1 piece grain toast (carb), ½ avocado (fat), ¼ cup lowfat cottage cheese (protein), 2 eggs and 3 egg whites (protein), 2 tbsp seeds - hemp, pumpkin (fat)" }, { name: "Overnight Oats", description: "½ cup gluten-free, sprouted oats (CARB), ½ cup milk of choice, 1 scoop protein powder (protein), 1 tablespoon chia seeds (fat), 1 tsp honey (carb)" } ] export default function Component() { const [currentMeal, setCurrentMeal] = useState(meals[0]) const [isSpinning, setIsSpinning] = useState(false) const spin = () => { setIsSpinning(true) const duration = 2000 // 2 seconds const interval = 100 // 0.1 second let elapsed = 0 const spinInterval = setInterval(() => { setCurrentMeal(meals[Math.floor(Math.random() * meals.length)]) elapsed += interval if (elapsed >= duration) { clearInterval(spinInterval) setIsSpinning(false) } }, interval) } useEffect(() => { spin() // Initial spin when component mounts }, []) return (

Balanced Meal Slot Machine

{currentMeal.name}

{currentMeal.description}

) }